<template>
  <el-container>
    <el-main>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->

        <el-table-column
          prop="startTime"
          label="开始时间"
          width="160"
          :formatter="formatterSTime"
        >
        </el-table-column>
        <el-table-column
          prop="endTime"
          label="结束时间"
          width="160"
          :formatter="formatterETime"
        >
        </el-table-column>
        <el-table-column
          prop="leavingReason"
          label="请假原因"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="employeeName" label="请假人" width="120">
        </el-table-column>
        <el-table-column prop="result" label="审批结果" width="120">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              :disabled="ifUnreviewed(scope.row)"
              size="mini"
              type="danger"
              @click="handleRevoke(scope.$index, scope.row)"
              >撤销申请</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <!-- 页脚分页 -->
    <div class="fenye">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-container>
</template>

<script>
export default {
  name: "Leave",
  data() {
    return {
      allData: [],
      ownData: [],
      tableData: [],
      page: 1, //页脚显示的当前页
      size: 10, //一页多少条数据
      total: 400, //总条目数

      multipleSelection: [], //当前选中的行

      searchList: {
        //搜索条件的
        uname: "",
        uclass: "",
      },
      dialogFormVisible: false, //弹出的修改表单
      form: {
        name: "",
        remark: "",
      },
      formLabelWidth: "120px", //宽度
    };
  },
  methods: {
    ifUnreviewed(row) {
      console.log(row);
      if (row.result != "未审批") {
        return true;
      } else {
        return false;
      }
    },
    //分页表格数据
    getTableData() {
      //ownData为当前用户的数据
      this.tableData = this.ownData.slice(
        (this.page - 1) * this.size,
        this.page * this.size
      );
      this.total = this.ownData.length; //总条目等于allDaTa长度
    },
    //size改变时的回调，参数为当前的size
    handleSizeChange(val) {
      // console.log("改变每页多少条，当前一页多少条", val);
      this.size = val;
      this.page = 1; //size改变时要把page重置为1，再把参数赋值给size，因为size改变会导致page数量改变
      this.getTableData();
    },
    //page改变时的回调函数，参数为当前页码
    handleCurrentChange(val) {
      // console.log("翻页，当前为第几页", val);
      this.page = val;
      this.getTableData();
    },

    getAllLeave() {
      const localEmployeeId = window.sessionStorage.getItem("employeeId");
      this.$request.get("/leave/queryAllAndNameByEmployeeId/" + localEmployeeId).then((res) => {
        if (res.data.obj != null) {
          this.ownData = res.data.obj;
          this.getTableData(); //获取信息后更新表单数据
        } else {
          this.$message.error("信息获取失败");
        }
      });
    },

    //格式化日期
    formatterSTime(row) {
      let date = new Date(row.startTime);
      let dateF = this.formatDate(date);
      return dateF;
    },
    formatterETime(row) {
      let date = new Date(row.endTime);
      let dateF = this.formatDate(date);
      return dateF;
    },

    formatDate(current_datetime) {
      const date = this.SimpleDateFormat(current_datetime).format('YYYY-MM-DD HH:mm')
      return date
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleRevoke(index, row) {
      this.$confirm("撤销此次请假?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
          this.$request
            .post("leave/insert", {
              id: row.id,
              result: "已撤销",
            })
            .then((res) => {
              if (res.data.obj) {
                this.$message.success("撤销成功");
                this.getAllLeave();
              } else {
                this.$message.error("撤销失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
  mounted() {
    this.getTableData();
    this.getAllLeave();
  },
};
</script>

<style scoped>
.el-header {
  background-color: rgb(42, 53, 66);
  color: #fff;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.el-col {
  /* background-color: #fff; */
  color: #fff;
}
i {
  font-size: 18px;
}
.fenye {
  position: fixed;
  bottom: 10px;
}
</style>